<template>
  <div class="main-content">
    <div style="margin: 30px 0; text-align: center">
      <el-input size="large" clearable @clear="reset" style="width: 500px; margin-right: 5px" v-model="data.courseName" placeholder="请输入课程名称查询"></el-input>
      <el-button size="large" type="primary" @click="load">查询</el-button>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in data.examData" :key="item.id" style="margin-bottom: 20px">
          <div class="card" @click="navTo(item)">
            <img :src="item.courseImg" alt="" class="card-image">
            <div class="card-content">
              <div class="overflowShow card-title">{{ item.paperName }}</div> <!-- Updated to show paperName -->
              <div style="display: flex; align-items: center; margin-top: 10px;">
                <img :src="item.teacherAvatar" alt="" class="user-avatar">
                <div class="teacher-name" style="flex: 1; margin-left: 10px;">{{ item.teacherName }}</div>
                <div class="exam-status" style="text-align: right;">
                  <el-tag v-if="item.status === '进行中'" type="success">{{ item.status }}</el-tag>
                  <el-tag v-if="item.status === '未开始'" type="warning">{{ item.status }}</el-tag>
                  <el-tag v-if="item.status === '已结束'" type="danger">{{ item.status }}</el-tag>
                </div>
              </div>
              <div class="course-info" style="margin-top: 10px;">课程名称：{{ item.courseName }}</div>
              <div class="date-info" style="margin-top: 10px;">开放时间：{{ item.startDatetime }} ~ {{ item.endDatetime }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="data.total" style="margin: 20px 0; text-align: center;">
      <el-pagination @current-change="load" background layout="prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  courseName: null,
  pageNum: 1,
  pageSize: 8,
  total: 0,
  examData: []
});

const load = () => {
  request.get('/testPaper/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      courseName: data.courseName
    }
  }).then(res => {
    if (res.code === '200') {
      data.examData = res.data.list;
      data.total = res.data.total;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const reset = () => {
  data.courseName = null;
  load();
};

const navTo = (item) => {
  if (item.status === '未开始') {
    ElMessage.warning('该小测还未开放');
    return;
  }
  if (item.status === '已结束') {
    ElMessage.warning('该小测已结束');
    return;
  }
  request.get('/testPaper/check/' + item.id).then(res => {
    if (res.code === '200') {
      location.href = '/front/testPaper?id=' + item.id;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

load();
</script>

<style scoped>
.main-content {
  padding: 20px;
}

.card {
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
  overflow: hidden;
  background-color: #fff;
  height: 100%;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.user-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
}

.teacher-name {
  font-size: 14px;
  color: #666666;
}

.exam-status .el-tag {
  margin-left: 5px;
}

.course-info {
  font-size: 14px;
  color: #7f8c8d;
}

.date-info {
  font-size: 14px;
  color: #999999;
}

.overflowShow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-col {
  width: calc(20% - 20px); /* Ensure each column takes up 20% minus gutter */
  box-sizing: border-box;
}
</style>
